<template>
	<div class="mod-config">
		<el-col :span="24">
			<h3>字段信息</h3>
			<div class="title_ls"></div>
		</el-col>
		<el-table :data="dataList" border v-loading="dataListLoading" @keyup.enter.native="getDataList()" style="width: 100%;">
			<el-table-column prop="colName" header-align="center" align="center" label="字段名称">
			</el-table-column>
			<el-table-column prop="colValue" header-align="center" align="center" label="字段描述">
				<template slot-scope="scope">
					<el-input v-model="dataForm.colValue" placeholder="请输入内容" v-if="addCfgFlag && tableMaxLength == scope.$index"></el-input>
					<span v-else>{{scope.row.colValue}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="colType" header-align="center" align="center" label="类型">
				<template slot-scope="scope">
					<el-select v-model="dataForm.colType" placeholder="请选择" size="small" v-if="addCfgFlag &&  tableMaxLength == scope.$index" @change="((val)=>{selectChange(val, scope.$index)})" :disabled="tableMaxLength != scope.$index">
						<el-option v-for="item in colTypeList" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
					<el-select v-model="scope.row.colType" placeholder="请选择" size="small" v-else :disabled="true" @change="((val)=>{selectChange(val, scope.$index)})">
						<el-option v-for="item in colTypeList" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
					<el-button type="info" @click="customerComponentConfigHandler(scope.row,scope.$index)" v-if="selectCfg && addIdx == scope.$index" size="mini">配置</el-button>
				</template>
			</el-table-column>
			<el-table-column prop="colIndex" header-align="center" align="center" label="排序">
				<template slot-scope="scope">
					<el-input v-model="dataForm.colIndex" placeholder="请输入内容" v-if="addCfgFlag && tableMaxLength == scope.$index"></el-input>
					<span v-else>{{scope.row.colIndex}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="" header-align="center" align="center" label="操作">
				<template slot-scope="scope">
					<el-button size="mini" type="danger" @click="deleteHandle(scope.$index, scope.row)" v-if="addCfgFlag && tableMaxLength == scope.$index">删除</el-button>
					<span v-else>无</span>
				</template>
			</el-table-column>
		</el-table>

		<div>
			<el-button type="warning" icon="el-icon-edit" @click="extendHandle()">新建</el-button>
			<el-button type="primary" icon="el-icon-plus" @click="dataFormSubmit()" @refreshDataList="getDataList()">保存</el-button>
		</div>
		
		<customer-component-config ref="customerComponentConfig"></customer-component-config>
	</div>
</template>
<script>
	import CustomerComponentConfig from './cc-customer-component-config'
	export default {
		data() {
			return {
				dataForm: {
					colName: '',
					colValue: '',
					colType: '',
					colIndex: '',
					colExtend:''
				},
				wechatList: [],
				wechatName: '',
				dataList: [],
				dataListLoading: false,
				id: '',
				notExtCount:0,//非扩展字段数量
				selectCfg:false,
				showInfoFlag: false,
				addCfgFlag: false,
				addIdx:'',
				tableMaxLength: -1,
				colTypeList: [{
						value: '0',
						label: "单行输入"
					},
					{
						value: '1',
						label: "号码"
					},
					{
						value: '2',
						label: "日期"
					},
					{
						value: '3',
						label: "邮箱"
					},
					{
						value: '4',
						label: "大文本"
					},{
						value:'5',
						label:'下拉框'
					}
				]
			}
		},
		components:{
			CustomerComponentConfig
		},
		activated() {

		},
		created() {
			this.getDataList()
			this.getNotEXTCount()
		},
		watch: {

		},
		methods: {
			// 获取数据列表
			getDataList() {
				var that = this
				this.dataListLoading = true
				this.$http.post('/cc/customer/config/page', {}).then(res => {
					console.log("获取数据列表==>",res.data.data)
					that.dataList = res.data.data
					that.dataListLoading = false
				})

			},
			getNotEXTCount(){
				var that = this
				this.$http.post('/cc/customer/config/getNotCusExtCount', {}).then(res => {
					console.log("获取基础字段数量==>",res.data.data)
					that.notExtCount=res.data.data
				})
			},
			extendHandle() {
				var index = this.dataList.length
				if(index > this.notExtCount + 25) {
					this.$message({
						message: '超过扩展字段的长度',
						type: 'warning'
					});
				} else {
					if(this.dataForm.colName != '' && this.dataForm.colName != undefined){
						this.$message({
						message: '请在保存后点击新建！',
						type: 'warning'
					});
					return;
					}
					this.addCfgFlag = true
					this.tableMaxLength = index;
					/**
					 * 非扩展字段（不是CUS_EXT开头）的数量-1 就是需要减去的数量
					 */
					index = index - (this.notExtCount - 1)
					this.dataForm.colName = "CUS_EXT" + index
					var obj = new Object();
					obj.colName = "CUS_EXT" + index
					obj.colValue = ''
					obj.colType = ''
					obj.colIndex = ''
					this.dataList.push(obj)
				}

			},
			selectChange(val,idx){
				this.addIdx = idx
				console.info(idx)
				if(val == '5'){
					this.selectCfg = true;
				}else{
					this.selectCfg = false;
				}
			},
			saveHandle() {
				dataFormSubmit()
			},
			deleteHandle(index, row) {
				var that = this
				that.selectCfg = false
				that.addIdx = ''
				that.addCfgFlag = false
				that.dataList.splice(index, 1)
//				that.dataForm = {};
				that.cleanDataFrom();

			},
			cleanDataFrom(){
				this.dataForm.colName = ''
				this.dataForm.colValue = ''
				this.dataForm.colType = ''
				this.dataForm.colIndex = ''	
				
			},
			verifyForm(){
				if(this.dataForm.colName != '' && this.dataForm.colValue != '' && this.dataForm.colType != '' && this.dataForm.colIndex != ''){
					return true;
				}
				return false;
			},
			setColExtend(str,idx){
				var obj = this.dataList[idx]
				console.info('当前配置的字段对象===》')
				console.info(obj)
				this.dataForm.colExtend = str
			},
			customerComponentConfigHandler(obj,idx){
				this.$nextTick(() => {
					obj.idx = idx
					this.$refs.customerComponentConfig.init(obj)
				})
			},
			// 表单提交
			dataFormSubmit() {
				var that = this
				this.$confirm(`确定要保存吗?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					var that = this
					var valid = that.verifyForm()
					if(!valid){
						this.$message({
						message: '请在新建后，内容填写完整后保存！',
						type: 'warning'
					});
						return;
					}
					if(valid) {
						this.$http.post('/cc/customer/config/add', {
							'colName': this.dataForm.colName,
							'colValue': this.dataForm.colValue,
							'colType': this.dataForm.colType,
							'colIndex': this.dataForm.colIndex,
							'colExtend':this.dataForm.colExtend
						}).then(res => {
							console.log("新增结果",resp)
							if(resp.data && resp.data.code === '0'){
								that.addCfgFlag = false
								that.tableMaxLength = -1
								that.selectCfg = false
								that.addIdx = ''
								that.dataForm = {};
								that.cleanDataFrom();
								that.$message({
									message: '操作成功',
									type: 'success',
									duration: 1000,
									onClose: () => {
										that.getDataList();
									}
								});
							}else{
								that.$message.error(resp.data.message)
							}
						})

					}

				}, () => {
					// 点击取消 
				}).catch(() => {

				})
			}

		},

	}
</script>
<style>
	.title_ls {
		width: 100%;
		height: 2px;
		border-top: 2px solid #409EFF;
		clear: both;
		margin-bottom: 20px;
	}
</style>